<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.name" placeholder="请选择小区" filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.name" :key="item.name"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                    </FormItem>
                </Form>
            </Row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column label="小区名称" >
                    <template slot-scope="scope">
                        {{scope.row.name}}
                        <!--{{housingNameList[scope.row.id]}}-->
                    </template>
                </el-table-column>
                <el-table-column prop="firstClass" label="行业1"></el-table-column>
                <el-table-column prop="secondClass" label="行业2"></el-table-column>
                <el-table-column label="设置服务行业" align="center" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="industry( scope.row.id )">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>


        <Modal v-model="modalIndustry" title="微信公众号服务行业" width="800">
            <Form ref="saveIndustry" :model="industryModal" :label-width="110">
                <FormItem label="已设置行业">
                    <el-tag
                        :key="tag.id"
                        v-for="tag in industryModal.oldIndustry"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{tag.firstClass}}　/　{{tag.secondClass}}
                    </el-tag>
                </FormItem>
            </Form>
            <div style="color:red;">
                注：点击确定，将添加服务行业（房地产/物业）
                <p>公众号最多设置两个服务行业，如已设置两个，请删除替换的行业！</p>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel()">关闭</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="tableLoading">确定</Button>
            </div>
        </Modal>

    </div>
</template>


<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";
    import moment from "moment"
    //线上上传账单地址
    const act = baseURL + "/api/bill/upload";

    export default {
        data() {
            return {
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                tableData: [],
                houseList: [],
                //表单提交状态
                modal: {},
                tableLoading: false,
                modalIndustry: false,
                modalType: 'add',
                industryModal: {},
            }
        },
        created: function () {
            this.gethouse();
            this.loadData();
        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/housing/loadData", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                        this.getIndustryAll();
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            //加载小区
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    this.houseList = res;
                });
            },
            //查询
            handleQuery(name) {
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            onCancel: function () {
                this.modalIndustry = false;
            },

            //查询所有小区行业
            getIndustryAll: function () {
                const selectList = [];
                this.tableData.forEach(res => {
                    selectList.push(res.id);
                });
                this.getRequest("/api/housing/wxIndustryByHousingIds?housingIds=" + selectList).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            handleClose(tag) {
                this.industryModal.oldIndustry.splice(this.industryModal.oldIndustry.indexOf(tag), 1);
            },
            industrySelected(val) {
                if (this.industryModal.oldIndustry.length >= 2) {
                    this.$Message.error({
                        content: "请删除替换的行业！",
                        duration: 3
                    });
                }
            },
            //获取行业设置
            industry: function (id) {
                this.getRequest("/api/housing/wxIndustry?housingId=" + id).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.industryModal = res.data;
                        this.industryModal.housingId = id;
                        this.modalIndustry = true;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //确认按钮
            handleSubmit: function () {
                let old = 0;
                if (this.industryModal.oldIndustry.length >= 2) {
                    this.$Message.error({
                        content: "请删除要替换的行业！",
                        duration: 5
                    });
                    return;
                }
                if (this.industryModal.oldIndustry.length == 1) {
                    old = this.industryModal.oldIndustry[0].id;
                }

                this.$confirm('每30个自然日内只能设置一次服务行业，请谨慎操作！！！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.formLoading = true;
                    this.postRequest("/api/housing/setIndustry", {
                        "oldIndustry": old,
                        "housingId": this.industryModal.housingId
                    }).then(res => {
                        if (res.code == 20000) {
                            this.$Message.success('操作成功！');
                            this.formLoading = false;
                            this.modalIndustry = false;
                        } else {
                            this.formLoading = false;
                            this.$Message.error({
                                content: res.message,
                                duration: 5
                            });
                        }
                    });
                }).catch(() => {
                    this.$Message.error({
                        content: '已取消',
                        duration: 5
                    });
                });
            },
        }
    };
</script>
